<template>
  <el-dialog v-model="dialogVisible" title="修改产品" width="500px" @close="dialogVisible = false">
    <el-form ref="formProjectRef" :rules="formRules" :model="formProject" label-width="120px">
      <el-form-item label="主体" required prop="projectId">
        <el-select v-model="formProject.projectId" placeholder="请选择主体">
          <el-option v-for="(op, oIndex) in ['周口市中医院']"  :key="op" :label="op" :value="op" />
        </el-select>
      </el-form-item>
      <el-form-item label="产品名称" prop="name">
        <el-input v-model="formProject.name" type="text" autocomplete="off" placeholder="请输入产品名称" />
      </el-form-item>
      <el-form-item label="产品单价" prop="price">
        <el-input v-model="formProject.price" type="text" autocomplete="off" placeholder="请输入产品单价" />
      </el-form-item>
      <el-form-item label="产品单位" prop="unit">
        <el-input v-model="formProject.unit" type="text" autocomplete="off" placeholder="请输入产品单位" />
      </el-form-item>
      <el-form-item label="产品描述" prop="describe">
        <el-input v-model="formProject.describe" type="text" autocomplete="off" placeholder="请输入产品描述" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" class="save" @click="dialogVisible = false"> 确 定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import { reactive , getCurrentInstance ,defineExpose , nextTick,ref } from 'vue';
  type FormInstance = InstanceType<typeof ElForm>;
  let dialogVisible = ref(false)

  let tableData = [
    {"id":7,"name":"产值","projectId":1,"project":{"id":1,"name":"周口市中医院"},"unit":"kwh","description":null,"totalPlanOutput":null,"totalActualOutput":null,"price":34},
    {"id":6,"name":"产值1","projectId":1,"project":{"id":1,"name":"周口市中医院"},"unit":"52","description":"lyj","totalPlanOutput":null,"totalActualOutput":null,"price":520},{"id":5,"name":"产值C","projectId":1,"project":{"id":1,"name":"周口市中医院"},"unit":"kg","description":"产值C","totalPlanOutput":null,"totalActualOutput":null,"price":58.7},{"id":4,"name":"产值B","projectId":1,"project":{"id":1,"name":"周口市中医院"},"unit":"kg","description":"产值B","totalPlanOutput":null,"totalActualOutput":null,"price":65.2},{"id":3,"name":"A类油","projectId":1,"project":{"id":1,"name":"周口市中医院"},"unit":"kg","description":"润滑油工厂-A类油","totalPlanOutput":null,"totalActualOutput":null,"price":75.8},{"id":2,"name":"机组#1-产电","projectId":1,"project":{"id":1,"name":"周口市中医院"},"unit":"MWh","description":"润滑油工厂-产电","totalPlanOutput":null,"totalActualOutput":null,"price":45.6},{"id":1,"name":"机组#1-产热","projectId":1,"project":{"id":1,"name":"周口市中医院"},"unit":"GJ","description":"润滑油工厂-产热","totalPlanOutput":null,"totalActualOutput":null,"price":46.5}
  ];

  let row = 7;
  const formRules = {
    audit_comment: [
      {
        'required': true,
        'message': `请输入驳回意见`,
        'trigger': `blur`
      }, {
        'max': 140,
        'message': `长度不能超过140字`,
        'trigger': `blur`
      }
    ]
  }
  const formProjectRef = ref();
  let formProject = reactive({
  });

  const changeSubmitFn = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate(async valid => {
      if (valid) {

      }
    });
  }
  // 初始化方法
  const open =  ( row) => {
    console.log(row);
    let arr = tableData.filter((item)=>{item.id==row.id});
    let obj = arr[0];
    formProject = {
      projectId: '周口市中医院',
      name:row.name,
      price:row.price,
      unit:row.unit,
      describe:row.describe
    };
    
    dialogVisible.value = true
  };

  defineExpose({open})
</script>